<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wasm-tools parse</title>
  <script type="module" src="parse.js"></script>
  <link rel="stylesheet" href="style.css">
  <style>
    .textarea-container {
      flex-grow: 1;
      padding: .4rem;
      display: grid;
      grid-column-gap: calc(.8rem + 8px);;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content auto 1fr;
      grid-template-areas:
        "h h"
        "a b"
        "c d"
    }

    textarea {
      resize: none;
      box-sizing: border-box;
      padding: .4rem;
      height: calc(100% - .4rem);
      width: 100%;
    }

    button {
      font-size: inherit;
      /* color: #505050; */
    }

    .description {
      grid-area: h;
    }

    .input-header {
      grid-area: a;
      padding-bottom: .4rem;
    }
    .output-header {
      grid-area: b;
    }

    .input {
      grid-area: c;
    }
    .output {
      grid-area: d
    }
  </style>
</head>

<header>
  <h1>wasm-tools parse</h1>
</header>

<div class="textarea-container">
  <div class="description">
    <p>Translate from the WebAssembly text format to binary using <a href="https://github.com/bytecodealliance/wasm-tools"><code>wasm-tools parse</code></a>.
    You can go the other direction using <a href="print"><code>print</code></a>.</p>
  </div>
  <div class="input-header">wat</div>
  <div class="input">
    <textarea id="input">(module
  (import "foo" "bar" (func (param f32)))
  (memory (data "hi"))
  (type (func (param i32) (result i32)))
  (start 1)
  (table 0 1 funcref)
  (func)
  (func (type 1)
    i32.const 42
    drop)
  (export "e" (func 1)))</textarea>
  </div>

  <div class="output-header">
    wasm <button id="download" disabled>Download</button>
  </div>
  <div class="output">
    <textarea id="output"></textarea>
  </div>
</div>
